Hello and welcome.
In this video we are going to create the project directory and also add the hastier mail.
Some are going to create a directory on my desktop just by a right quiggin and a blank space.
Click on new folder.
And I'm just going to call this folder.
Wait.
Conversion.
Feel free to call it whatever name you like.
I will be using this sublime text editor for this part of the project so I'm going to do the kilogramme
to pound conversion.
So this hasty email file I'm going to save it.
I'm saving it into the directory that I created and I'm going to call it cagy to point.
So going to be call cagy to pound dot hastey EMAIL are click save.
So this file now is will be hastier mail fast so if you look on the bottom right hand corner is go hastier
mount on it.
So I've already pre staged the hastier more code to make things easier and way into adding on an explain
the code to you.
Line by line.
I have had the hastier mail for the kilogram two pound weight convert to someone to run through the
cut line by a line.
Line one here is the doc type the doc type is the first thing you have to indicate inside and hastier
mail document.
What this is saying is this is not actually part of the hate mail document itself is just a declaration
to notify web browsers that the content of the document is hastier Mail 5.
So that's what the doctype does.
The actual host here mail begins on line to an end on line twenty three.
So any content between line two and twenty three is the whole hastier male content.
Line 3 here is it head section.
Thus the open head section.
This is the clues in head section on line 6 inside the head section.
I've got a title which will display in the title part of the web browser.
This will be the title for the application.
It will see kg's to pounds weight converter so that the opening title tag that's close in title track
here online.
Got a link to an external style sheet.
I'm going to be using I've already given it a name called cagy to P C since I will be creating that
the sun probably in the next lecture.
This is just some attributes are sociate it with the link.
So this is a relative link tells it a style sheet type is a text slash C Ss Trev basically determines
where the style sheet would be located because this going to be located inside the same directly.
All I need to do is just specify the name for the stylesheet and then they mumble a call it is cagy
to P C asset's.
So that concludes the head section so the body section begins on line 7 and ends on line 22.
So the actual visible content is inside the body tag.
I am wrapping the outdoor content inside of it.
Basically is a division of a page on the web page where you section off an area.
So I've decided to call it giving Deve an attribute.
I'll be using this idea attribute to stylesheet later with C assess.
I'm giving it an idea of container because it's going to contain all the of the other elements we need
here on line.
I have given it a title.
This would be the title for the converter to say with converter cagy to pounce here.
This is a paragraph tag where it is prompting the user to enter their wheat value in KG k..
Gone are the paragraph tag here and in between this paragraph tag and got a label.
Basically a label will just display a text label.
It's going to.
Display.
That's a first label.
And then after that label we have an input.
This is going to be where they will input the value in kilograms.
So I've given the input.
I added value of input.
KG is the type is going to be in number and there is a place holder called kilogrammes or you have the
place holder kg inside and here with quality on input attribute so busy always saying when you put a
value tool for this wave combat this is going to be a jam Usk group function that I will be creating
later.
So when you impose a value this function here will do the conversion using the value you have input
at.
Okay so we're going to use this key word in combination with a value to do the conversion.
And when the values change is this on change attribute also or core it's function again and change it
to the new value added.
So each time you change the value in the input it will contact this function here which it's a javascript
function and that will display the new value on line 16.
I've got another paragraph here.
This is a paragraph that I truly outports the conversion weight in pounds.
So it will see your weight in pounds and that is of course the span elemental here.
So this band physically will add the value of this out to pounds whatever the output the conversion
is it will add that to this text here.
So you see your weight in pounds is whatever value that the function has computed it will add that to
this last where we have this pan element here.
All right so this is a close and Dave pan online 20 here and well a scrip tag.
And we'll be using an external javascript.
And this is our.
Basically is this source is asking where to pick up the javascript.
Far from.
So there's going to be in the same direct terie as a hastier mail and csx.
So all I need to do is specify the name.
So I've called it cagy to p Duchess which is the name I will give it when I create it.
So that's basically the hastier mail complete it.
So I'm just going to click on file and save.
And then we can quickly run it and see what it looks like.
I'm just going to open up the directory and double click on this key to p and we can see what it looks
like so this is what it looks like at the moment which is exactly what I want.
This is the place order here go kg.
You can see because the value of the input is a number.
So you have these so you can use this to add a number or you can manually add the numbers.
Nothing will happen at the moment because I have not added digenova scroop functionality yet but when
I do it would display the conversion here.
So that's it for this.
Let's show him the next lecture.
I am going to add the javascript functionality.
Thanks for watching.
By phone now.